<!--
 * @Author: your name
 * @Date: 2021-11-25 19:10:36
 * @LastEditTime: 2021-12-02 08:32:54
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\client\src\view\page\index.vue
-->
<template>
  <div class="page">
    <el-card>
      <div class="headline-box">
        <div><img :src="coverImg" alt="" v-if="coverImg" /></div>
        <div class="headline-title">{{ info.title }}</div>
      </div>
      <v-md-preview :text="info.content"></v-md-preview>
    </el-card>
  </div>
</template>

<script>
import api from "../../api";
export default {
  data() {
    return {
      path: "",
      info: {},
      coverImg: "",
    };
  },
  computed: {
    //保存路由地址
    pathname() {
      const route = this.$route.fullPath;
      return route;
    },
  },
  watch: {
    pathname() {
      this.getPathDetail();
    },
  },
  methods: {
    //获取详情
    async getPathDetail() {
      this.path = this.$route.params.path;
      const res = await api.getDetailPage(this.path);
      this.info = res.data;
      //文章封面
      this.coverImg = this.info.cover;
    },
  },
  created() {
    this.getPathDetail();
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/common/common.scss";
.el-card {
  @include background_color("card_background");
  @include font_color("text-color");
  border: none;
}
.page {
  width: 100%;
  height: 100%;
  .el-card {
    width: 100%;
  }
}
.headline-box {
  width: 100%;
  .headline-title {
    text-align: center;
    font-weight: bold;
    font-size: 36px;
  }
}
</style>
